<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="bindMain">
      <div class="bindInfo">
        <div class="bindImg">
          <img
            src="https://cdn7.axureshop.com/demo/1763441/images/%E5%B7%B2%E6%9C%89%E5%B0%B1%E8%AF%8A%E5%8D%A1/u1422.png"
            alt=""
          />
          <span>查询信息</span>
        </div>
        <img
          src="	https://cdn7.axureshop.com/demo/1763441/images/%E6%97%A0%E5%B0%B1%E8%AF%8A%E5%8D%A1/u1274.png"
          alt=""
        />
        <div class="bindImg">
          <img
            src="https://cdn7.axureshop.com/demo/1763441/images/%E6%89%8B%E6%9C%BA%E9%AA%8C%E8%AF%81/u1361.png"
            alt=""
          />
          <span>绑定就诊卡</span>
        </div>
      </div>
      <div class="bindText">
        <h2>{{ name }}</h2>
        <div><span>身份证号</span> {{ idcard }}</div>
        <div><span>就诊卡号</span> {{ patient }}</div>
        <div><span>手机号</span> {{ tel }}</div>
        <div><span>性别</span> {{ sex }}</div>
        <div><span>出生日期</span> {{ date }}</div>
      </div>
      <div class="bind">
        <van-button
          type="primary"
          size="large"
          color="#2ec7c9"
          @click.prevent="searchAciton"
          >绑卡</van-button
        >
      </div>
    </div>
  </div>
</template>


<script>
import navbar from "../../../components/navbar.vue";
import { addbdCardApi } from "../../../api/patient";
import { Button, Toast } from "vant";
export default {
  components: {
    navbar,
    [Button.name]: Button,
  },
  data() {
    return {
      name: this.$route.params.data.name,
      idcard: this.$route.params.data.idcard,
      tel: this.$route.params.data.tel,
      sex: this.$route.params.data.sex,
      date: this.$route.params.data.date,
      patient: "",
      id: this.$route.params.data._id,
    };
  },
  methods: {
    async searchAciton() {
      await addbdCardApi({ id: this.id, patientcard: this.patient });
      Toast("绑定成功");
      this.$router.push("/home");
    },
  },
  created() {
    let idhide = this.idcard.slice(4, 14);
    this.idcard = this.idcard.replace(idhide, "**********");
    let telhide = String(this.tel).slice(3, 7);
    this.tel = String(this.tel).replace(telhide, "****");
    this.patient = idhide + telhide;
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

* {
  margin: 0;
  padding: 0;
}
.bindMain {
  width: 100%;
  height: 100%;
  position: absolute;
  top: vw(55);
  z-index: 2;
  .bindInfo {
    width: 100%;
    height: vw(60);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: vw(20);
        height: vw(20);
        margin-bottom: vw(5);
      }
      span {
        font-size: vw(12);
        color: #2ec7c9;
      }
    }
  }
  .bindText {
    margin-top: vw(12);
    padding-left: vw(20);
    display: flex;
    background: #fff;
    flex-direction: column;
    height: auto;
    h2 {
      margin-top: vw(10);
      margin-bottom: vw(10);
      font-size: vw(20);
    }
    div {
      height: vw(38);
      width: calc(100% - vw(20));
      display: flex;
      align-items: center;
      font-size: vw(14);
      border-bottom: vw(1) solid #cccccc69;

      span {
        width: vw(100);
      }
    }
  }
  .bind {
    width: calc(100% - vw(70));
    height: vw(46);
    position: fixed;
    bottom: 0;
    padding: vw(5) vw(35);
    background: #fff;
    .van-button--large {
      height: vw(44);
    }
  }
}
</style>